<template>
	<scroll-view class="list-wrap" scroll-y refresher-background="transparent" :scroll-with-animation="true"
				:refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="search"  @scrolltolower="loadMore" :show-scrollbar="false">
		<view v-for="(item, i) in localData" :key="i">
			<view class="item">
				<view class="title">{{item.title}}</view>
				<view class="imgs">
					<view v-for="(img, k) in item.imgs" :key="img">
						<image :src="img" :class="{nomr: (k + 1) % 3 == 0}" @click="showPreview(item.imgs, k)" mode="aspectFill" class="ls-img" />
					</view>
				</view>
				<view class="gray f28">{{item.issueTime}}</view>
			</view>
			<view class="line"></view>
		</view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</scroll-view>
</template>

<script>
	import {
		SelectPageInfo, SelectListFile
	} from '@/pages/common/api.js'
	import {shopCode, baseUrl} from '@/pages/common/js/http.js'
	export default {
		data() {
			return {
				reload: false,
				triggered: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				searchForm: {
					current: 1,
					size: 10
				},
				localData: []
			}
		},
		mounted () {
			this.search()
		},
		methods: {
			loadMore () {
				console.log('上拉触底。。。。。。')
				if (this.status === 'noMore') {
					return
				}
				// this.status = 'more';
				this.status = 'loading';
				this.$nextTick(() => {
					setTimeout(() => {
						this.getList();
					}, 1000)
				})
			},
			search () {
				this.reload = true
				this.triggered = true
				this.searchForm.current = 1
				this.status = 'loading';
				this.getList();
			},
			loadImgs (refId) {
				let basePath = baseUrl()
				return SelectListFile({
					refId: refId
				}).then(res => {
					console.log('SelectListFile', res)
					if (res.code === 20000) {
						return res.data.map(d => {
							return `${basePath}/file/download?id=${d.id}`
						})
					}
					return null
				})
			},
			getList() {
				let params = Object.assign({}, this.searchForm)
				params.shopCode = shopCode
				SelectPageInfo(params).then(async res => {
					console.log('日志', res)
					uni.stopPullDownRefresh()
					if (res.code === 20000) {
						let list = await Promise.all(res.data.records.map(async d => {
							d.imgs = await this.loadImgs(d.id)
							return d
						}))
						this.localData = this.reload ? list : this.localData.concat(list);
						this.reload = false;
						this.searchForm.current++
						if (res.data.current < res.data.pages) {
							this.status = 'more';
						} else {
							this.status = 'noMore'
						}
					}
					this.$nextTick(() => {
						setTimeout(() => {
							this.triggered = false
						}, 1000)
					})
				})
			},
			showPreview(imgs, i) {
				uni.previewImage({
					current: imgs[i],
					urls: imgs,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrap {
		height: calc(100vh - 390rpx);
		background-color: #fff;
		overflow: hidden;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		// margin-top: 50rpx;
		// padding-top: 70rpx;
		box-sizing: border-box;
		.item {
			padding: 20rpx;
		}

		.title {
			padding: 10rpx;
			margin-bottom: 20rpx;
		}

		.imgs {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.ls-img {
			width: 220rpx;
			height: 220rpx;
			margin-right: 22rpx;
			margin-bottom: 22rpx;

			&.nomr {
				margin-right: 0rpx;
			}
		}
	}
</style>